<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- CheckBox中只要有了 v-model checked就没有作用了 -->
    <!-- <input type="checkbox" name="" checked value="apple" v-model="isCheck" id="">apple -->

    <!-- checkbox 多选 每一个CheckBox都是同一个数组数据 而且是一个数组 选中会将value值加到数组中 如果没有value值就是null -->
    <input type="checkbox" name="" checked value="apple1" v-model="arr" @change="changeOne" id="">apple1
    <input type="checkbox" name="" checked value="apple2" v-model="arr" @change="changeOne" id="">apple2
    <input type="checkbox" name="" checked value="apple3" v-model="arr" @change="changeOne" id="">apple3
    <input type="checkbox"  v-model="isCheck" @change="changeAll">all
    {{arr}}

    <h2>单选框 {{sex}}</h2>
    <input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女
    <h2>下拉框 {{sel}} {{sels}}</h2>
    <select name="" id="" v-model="sel">
      <option value="小米">小米</option>
      <option value="华为">华为</option>
      <option value="OPPO">OPPO</option>
      <option value="VIVO">VIVO</option>
    </select>

    <select name="" id="" multiple v-model="sels">
      <option value="小米">小米</option>
      <option value="华为">华为</option>
      <option value="OPPO">OPPO</option>
      <option value="VIVO">VIVO</option>
    </select>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        name: 'zf',
        isCheck: false,
        arr: [],
        sex: '男',
        sel: '',
        sels: []
      },
      methods: {
        changeOne(){
          this.isCheck = this.arr.length === 3 ? true : false
        },
        changeAll(){
          this.arr = this.isCheck ? ['apple1', 'apple2', 'apple3'] : []
        }
      }
    })

    /**
     * lianxishuohuade gongju tabuhuixihuanni nimen bukenng zaiyiqi 
     * jintiantianqi meiyou zuotianleng , nijintian haikesaoma zuotian wanshang wogaiyigebenzi gaiyige benzi
     * dou ganjue youdianleng nijintian zuonage yemianl ma youmeiyou yudao shenme wenti 
     * wojin tianzaoshang xial 302 zhenghao lai l yiliang 308 duoyi wo jintian laide shaowei zaodian 
     * baikaishui meiyouweidao buyoumo: wo qu mai l yige shouzhuabing ranhou maizaofan de ren meishenren, yiban 
     * wo zuo banchelai douyao paidui
     * 
     * 
     * youdian: xixin 
     */

     /*
        nvshengde shenghuo doushi hen kuzaode xiwang youren nengbata congkuzaode shenghuozhong jiejiu chulai

     */
  </script>
</body>
</html>